<template>
    <div>
        <!-- 头部区域 (申请转诊按钮) -->
        <div class="hader">
            <h6>会诊分诊</h6>

        </div>
        <!-- 会诊列表区域 -->
        <div class="section">
            <div class="article">
                <van-row type="flex" justify="center" class="articletheme">
            <van-col span="7" class="theme">会诊列表</van-col>
            <van-col span='0' class="search" offset="9">
                <img src="https://s1.ax1x.com/2022/10/14/xdxpGT.png" alt="" @click="search">
            </van-col>
            <van-col span="2" offset="3">
                <img src="https://s1.ax1x.com/2022/10/14/xdx9RU.png" alt="">
            </van-col>
            </van-row> 
            </div>
            <ul class="List">
                <li @click="info">
                    <van-row type="flex" justify="center" class="articleList" >
                    <van-col span="5" class="backList">
                     <span>待接诊</span>
                    </van-col>
                    <van-col span="14" class="personnel">
                        <h6>王慧芳 10岁 女</h6>
                        <span>To：小儿心内科</span>
                    </van-col>
                    <van-col span="4" class="Listtitem">今天 9:00</van-col>
                    </van-row>
                </li>
                <li>
                    <van-row type="flex" justify="center" class="articleList" >
                    <van-col span="5" class="backList">
                     <span>待接诊</span>
                    </van-col>
                    <van-col span="14" class="personnel">
                        <h6>王慧芳 10岁 女</h6>
                        <span>To：小儿心内科</span>
                    </van-col>
                    <van-col span="4" class="Listtitem">今天 9:00</van-col>
                    </van-row>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name:'assiconsultation',
    data() {
        return {
        alue1: 0,
      value2: 'a',
      option1: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
      ],
        }
    },
     methods: {
        // 通过编程式路由导航跳转到搜索页
        search(){
            this.$router.push({ 
                path:'/assisearch'
            })
        },
        tation(){
            this.$router.push({
                path:'/tation'
            })
        },
        info(){
            this.$router.push({
                path:'/assiconsu'
            })
        }
     },
}
</script>

<style lang="less" scoped>
    .hader{
        height: 80px;
        background: #199ed8;
        overflow: hidden;
        
        h6{
            margin-top: 2.1875rem;
            text-align: center;
            color: #fff;
            background: #199ed8;
            font-weight: 100;
            font-size: 1.0625rem;
        }
        a{
            display:inline-block;
            width: 15rem;
            height: 3.125rem;
            border-radius: 3.125rem;
            display: flex;
            justify-content: center;
            align-items: center;
            justify-items: center;
            margin-left: 4.375rem;
            margin-top: 2.3125rem;
            background: #ffffff;
            img{
                width: 1.75rem;
                height: 1.875rem;
            }
            span{
                color: #199ed8;
            }
        }
    }
    .article{
        border-bottom:.0625rem #ccc solid;
        .articletheme{
            height: 1.25rem;
           padding: .375rem;
           
           .theme{
            font-size: .8125rem;
            color: #199ed8;
           }
        }
    }
    .articleList{
        padding: .625rem;
        height: 2.5rem;
        border-bottom: 1px solid #ccc;
    }
    .backList{
        background-image: url('https://s1.ax1x.com/2022/10/14/xdxCzF.png');
        background-repeat:no-repeat;
        background-position: .625rem 0;
        span{
            font-size: .625rem;
            color: #fff;
            background-color:rgba(0,0,0,0);
            position: relative;
            top: .625rem;
            left: .6875rem;
        }
    } 
    .List{
        .personnel{
        h6{
            margin-bottom: .3125rem;
        }
        span{
            font-size: .8125rem;
            color: #999999;
        }
        
    }  
    .Listtitem{
            font-size: .625rem;
        }
    }
</style>